<template>
  <div class="">
    <div class="top">
      <!-- 筛选 -->
      <div class="screen" style="margin: 25px">
        <div style="width: 30%">筛选：</div>

        <el-input
          type="search"
          style="width: 30%"
          placeholder="请输入关键字"
          v-model="inputvalue"
        ></el-input>
        <el-button slot="append" icon="el-icon-search" @click="search()">
        </el-button>
      </div>
    </div>

    <!-- 表格 -->

    <div class="table" style="margin: 25px">
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="500"
        :row-class-name="
          (params) => 'hight-color ' + 'hight-color' + params.rowIndex
        "
      >
        <!-- 事件 -->

        <el-table-column label="时间" prop="date">
          <template slot-scope="scope">
            <span v-html="showData(scope.row.date, inputvalue)"></span>
          </template>
        </el-table-column>

        <!-- 用户名 -->

        <el-table-column label="用户名" prop="name">
          <template slot-scope="scope">
            <span v-html="showData(scope.row.name, inputvalue)"></span>
          </template>
        </el-table-column>

        <!-- 地址 -->

        <el-table-column label="地址" prop="address">
          <template slot-scope="scope">
            <span v-html="showData(scope.row.address, inputvalue)"></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      inputvalue: '',
      tableData: [
        {
          date: '2016-05-02',

          name: '张三',

          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',

          name: '李四',

          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',

          name: '王五',

          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',

          name: '赵六',

          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },

  components: {},

  computed: {
    // // 实时监听表格
    //  tables: function () {
    //    const search = this.search;
    //    if (search) {
    //      return this.tableData.filter((dataNews) => {
    //        // 获取对象的字段 返回一个数组  用数组调用some方法
    //        return Object.keys(dataNews).some((key) => {
    //          //数组有一项符合就返回true  大写字符全部被转换为了小写字符
    //          return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
    //        });
    //      });
    //    }
    //    return this.tableData;
    //  },
  },

  mounted () {},

  methods: {
    search () {
      this.tableData.forEach((item) => {
        for (const key in item) {
          console.log(item[key])
        }
      })
    },
    showData (val, searchData) {
      const Reg = new RegExp(searchData, 'ig')
      if (val) {
        const res = val.replace(
          Reg,
          '<span style="background-color: yellow;">$&</span>'
        )
        return res
      }
    }

    // // 筛选变色
    //  showDate(val) {
    //    val = val + "";
    //       //判断搜索记录是否包含某个关键字 不为fase或者空
    //    if (val.indexOf(this.search) !== -1 && this.search !== "") {
    //      return val.replace(
    //        this.search,
    //        '<font color="red">' + this.search + "</font>"
    //      );
    //    } else {
    //      return val;//不做任何修改
    //    }
    //  },
  }
}
</script>

<style lang="scss">
.ceshi {
  color: red;
  background: red!important;
}
</style>
